<template>
  <component :is="tag">
    <a-menu :mode="menuMode" :theme="theme" :collapsed="appStore.isCollapse" v-model:selectedKeys="defaultPath"
      v-model:openKeys="defaultExpandKeys" @menu-item-click="onMenuClick">
      <template v-for="item of menuOptions" :key="item.key">
        <template v-if="!item.children">
          <a-menu-item :key="item.key">
            <template #icon>
              {{ item.label }}
              <component :is="item.icon || 'icon-menu'" />
              <IconFont :type="item.icon || 'icon-menu'" style="font-size: 18px"></IconFont>
            </template>
          </a-menu-item>
        </template>
        <template v-else>
          <SubMenu :key="item.key" :menu-info="item" />
        </template>
      </template>
    </a-menu>
  </component>
</template>

<script lang="ts">
import { computed, defineComponent, PropType, ref, shallowReactive, watch, watchEffect, onMounted } from 'vue'
import { RouteRecordRaw, useRoute, useRouter } from 'vue-router'
import { isExternal } from '@/utils'
import useAppConfigStore from '@/store/modules/app-config'
import { LayoutMode, SideTheme, ThemeMode } from '@/store/types'
import { transfromMenu } from '@/store/help'
import { Icon } from '@arco-design/web-vue'
import emitter from '@/hooks/useEventBus'
import useUserStore from '@/store/modules/user'
import { generatorRoutes } from '@/store/help'
const IconFont = Icon.addFromIconFontCn({
  src: '/static/font/iconfont.js',
})
export default defineComponent({
  name: 'ScrollerMenu',
  props: {
    routes: {
      type: Object as PropType<Array<RouteRecordRaw>>,
      require: true,
      default: () => [],
    },
    mode: {
      type: String as PropType<'vertical' | 'pop' | 'horizontal' | 'popButton' | undefined>,
      default: 'vertical',
    },
  },
  components: { IconFont },
  setup(props) {
    const appStore = useAppConfigStore()
    const menuOptions = shallowReactive([] as Array<any>)
    console.log(menuOptions)

    const defaultPath = ref([] as Array<string>)
    const defaultExpandKeys = ref([] as Array<string>)
    const menuMode = computed(() => props.mode)

    const currentRoute = useRoute()
    const userStore = useUserStore()
    const router = useRouter()
    const route = ref(router.currentRoute.value)
    defaultPath.value.push(currentRoute.fullPath)
    const tag = ref(menuMode.value === 'vertical' ? 'Scrollbar' : 'div')
    const theme = computed(() => {
      if (appStore.theme === ThemeMode.DARK) {
        return 'dark'
      }
      if (appStore.layoutMode === LayoutMode.TTB) {
        return 'light'
      }
      return appStore.sideTheme === SideTheme.IMAGE
        ? 'dark'
        : appStore.sideTheme === SideTheme.WHITE
          ? 'light'
          : 'dark'
    })
    handleExpandPath()
    function handleMenu(routes?: Array<RouteRecordRaw>) {
      menuOptions.length = 0
      const tempMenus = transfromMenu(routes || [])

      menuOptions.push(...tempMenus)
    }
    function handleExpandPath() {
      const paths = currentRoute.fullPath.split('/')
      paths.forEach((it) => {
        if (it && !defaultExpandKeys.value.includes('/' + it)) {
          defaultExpandKeys.value.push('/' + it)
        }
      })
    }
    function onMenuClick(key: string) {
      if (key == '/processrowfactory/planplant') {
        emitter.emit('bcCx')
      }
      if (isExternal(key)) {
        window.open(key)
      } else {
        router.push(key)
        if (appStore.deviceType === 'mobile') {
          appStore.toggleCollapse(true)
        }
      }
    }
    watch(
      () => currentRoute.fullPath,
      (newVal) => {
        defaultPath.value.length = 0
        defaultPath.value.push(newVal)
        handleExpandPath()
      }
    )
    watch(
      () => props.mode,
      (newVal) => {
        newVal === 'vertical' ? 'Scrollbar' : 'div'
      }
    )
    watchEffect(() => {
      handleMenu(props.routes)
    })
    // watch(() => router.currentRoute, (to, from) => {
    //   route.value = to
    //   userStore.saveUserTow().then((res) => {
    //     if (res == '成功') {
    //       let list = sessionStorage.getItem('menuList')
    //       handleMenu(generatorRoutes(JSON.parse(list)))
    //     }
    //   })
    // }, { immediate: true, deep: true })
    // onMounted(() => {
    //   window.addEventListener('beforeunload', () => {
    //     userStore.saveUserTow()
    //     handleExpandPath()
    //   })
    // })
    return {
      appStore,
      tag,
      theme,
      menuMode,
      defaultPath,
      defaultExpandKeys,
      menuOptions,
      onMenuClick,
    }
  },
})
</script>

<style lang="less" scoped>
:deep(.arco-menu-collapsed) {
  margin: 0 auto;
}

:deep(.arco-menu-inner) {
  background: #207bb7;
}

:deep(.arco-menu-light .arco-menu-inline-header) {
  background: #207bb7;
  color: #fff;
}

:deep(.arco-menu-light .arco-menu-item) {
  background: #207bb7;
  color: #fff;
}

:deep(.arco-menu-light .arco-menu-item .arco-icon,
  .arco-menu-light .arco-menu-group-title .arco-icon,
  .arco-menu-light .arco-menu-pop-header .arco-icon,
  .arco-menu-light .arco-menu-inline-header .arco-icon,
  .arco-menu-light .arco-menu-item .arco-menu-icon,
  .arco-menu-light .arco-menu-group-title .arco-menu-icon,
  .arco-menu-light .arco-menu-pop-header .arco-menu-icon,
  .arco-menu-light .arco-menu-inline-header .arco-menu-icon) {
  color: #fff !important;
}

:deep(.arco-menu-light .arco-menu-inline-header.arco-menu-selected .arco-icon) {
  color: #fff;
}

:deep(.arco-menu-light .arco-menu-item.arco-menu-selected) {
  background: #fff !important;
}

:deep(.arco-menu-vertical .arco-menu-item.arco-menu-has-icon.arco-menu-selected .arco-menu-title) {
  color: #207bb7;
}

:deep(.arco-menu-light .arco-menu-inline-header.arco-menu-selected) {
  // color: #207bb7;
  // background: #fff !important;
  color: #fff;
}

// :deep(.arco-menu-light .arco-menu-inline-header.arco-menu-selected .arco-icon) {
//   color: #fff;
//   background: #fff;
// }

:deep(.arco-menu-light .arco-menu-inline-header .arco-menu-icon) {
  color: #fff;
}

:deep(.arco-menu-light .arco-menu-inline-header .arco-icon) {
  color: #fff;
}

:deep(.arco-menu-light .arco-menu-item.arco-menu-selected .arco-icon) {
  color: #207bb7 !important;
}

:deep(.arco-menu-light .arco-menu-item.arco-menu-selected) {
  background: #fff !important;
}

:deep(.arco-menu-vertical .arco-menu-item) {
  max-height: 40px;
}

:deep(.arco-menu-light .arco-menu-item:hover .arco-icon,
  .arco-menu-light .arco-menu-group-title:hover .arco-icon,
  .arco-menu-light .arco-menu-pop-header:hover .arco-icon,
  .arco-menu-light .arco-menu-inline-header:hover .arco-icon,
  .arco-menu-light .arco-menu-item:hover .arco-menu-icon,
  .arco-menu-light .arco-menu-group-title:hover .arco-menu-icon,
  .arco-menu-light .arco-menu-pop-header:hover .arco-menu-icon,
  .arco-menu-light .arco-menu-inline-header:hover .arco-menu-icon) {
  color: rgb(81 92 108) !important;
}

:deep(.arco-menu-light .arco-menu-item:hover .arco-icon,
  .arco-menu-light .arco-menu-group-title:hover .arco-icon,
  .arco-menu-light .arco-menu-pop-header:hover .arco-icon,
  .arco-menu-light .arco-menu-inline-header:hover .arco-icon,
  .arco-menu-light .arco-menu-item:hover .arco-menu-icon,
  .arco-menu-light .arco-menu-group-title:hover .arco-menu-icon,
  .arco-menu-light .arco-menu-pop-header:hover .arco-menu-icon,
  .arco-menu-light .arco-menu-inline-header:hover .arco-menu-icon) {
  color: rgb(81 92 108) !important;
}

:deep(.arco-menu-light .arco-menu-inline-header:hover .arco-menu-icon) {
  color: rgb(81 92 108) !important;
}

:deep(.arco-menu-light .arco-menu-inline-header:hover) {
  color: rgb(81 92 108) !important;
  background: #fff !important;
}

:deep(.arco-menu-light .arco-menu-inline-header:hover .arco-icon) {
  color: rgb(81 92 108) !important;
}

.scrollbar {
  height: calc(100% - @logoHeight) !important;
  overflow-y: auto;
  background: #207bb7;

  &::-webkit-scrollbar {
    width: 0;
  }
}
</style>
